<template>
   <el-card class="box-card-infoTable">
        <div >
           <!-- <p>Child ID: {{ $route.params.paramName }}</p>  -->
            <el-table :data="tableData" stripe style="width: 100%;height: 100%" height="268">
                <el-table-column prop="evaluateItem" label="决策项" width="180" />
                <el-table-column prop="itemVal" label="决策值" width="180" />
                <el-table-column prop="stage" label="时间段" />
            </el-table>
        </div>
   </el-card>
</template>

<script lang="ts" setup>
import axios from 'axios'
import {onMounted, ref,watch} from 'vue'
import { useRouter ,useRoute} from 'vue-router'
import {BASE_URL} from '@/utils/common.js'

  const router = useRouter()
  const route = useRoute()
 
onMounted(
  async ()=>{
    let stage = route.params.paramName
    let url = BASE_URL+'/getOptimizeThrees?stage='+stage;
    try {
      const response = await axios.get(url)
      tableData.value = response.data;
      
    } catch (error) {
      console.log(error)
    }
    
  }
)

// 监听路由变化
watch(
   () => route.path,
  async (newPath, oldPath) => {
    // console.log('路由变化了，新的路径是：', newPath);
    // console.log('路由变化了，旧的路径是：', oldPath);
    let i = newPath.indexOf('/effect/optimaze-ctrl/optimaze-child3/information-table/')
    if(i>=0){
    //  alert(route.params.paramName)
      let stage = route.params.paramName
    let url = BASE_URL+'/getOptimizeThrees?stage='+route.params.paramName;
    try {
      const response = await axios.get(url)
      tableData.value = response.data;
      
    } catch (error) {
      console.log(error)
    }

    }
     
  },
  { immediate: true } // 立即执行监听函数
);

  const tableData = ref([
     {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  ])
</script>

<style scoped lang="scss">
  .box-card-infoTable{
   background-color: rgb(26, 68, 94);
   border-width: 0;
  }
</style>